/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-08 23:07:47
 * @LastEditTime: 2022-05-16 10:55:59
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'

import { Button, List, message, Modal } from 'antd'
import {  ExclamationCircleOutlined } from '@ant-design/icons';


import Dayjs from 'dayjs'


import { getList, deleteArticle } from '@/api/list'
import './index.less'

export default function ListList() {
  const navigate = useNavigate()
  const [dataSource, setDataSource] = useState([])
  const [pageSize, setPageSize] = useState(10)



  const initList = (pagination) => {
    getList(pagination).then(({ data }) => {
      setDataSource((data.arr))
      setPageSize(data.count)
    })

  }
  React.useEffect(() => {
    initList({ num: 0, count: 10 })
  }, [])

  const onChange = (size) => {
    console.log(size);
  }

  const { confirm } = Modal;
  const handleDeleteArticle = (id) => {
    confirm({
      title: `您确认删除文章【${id}】吗?`,
      icon: <ExclamationCircleOutlined />,
      okText:'确认',
      cancelText:'取消',
      async onOk() {
        const { message: msg } = await deleteArticle({ id })
        message.success(msg)
        initList({ num: 0, count: 10 })
      }
    })
  }
  return (
    <div className='table-container'>
      <List
        rowKey={record => record.id}
        pagination={{ pageSize: pageSize, onChange }}
        dataSource={dataSource}
        renderItem={item => (
          <List.Item actions={[
            <Button type='primary' ghost onClick={() => navigate(`/edit?id=${item.id}`)}>编辑</Button>,
            <Button type='danger' ghost onClick={() => handleDeleteArticle(item.id)}>删除</Button>]}>
            <List.Item.Meta
              title={<a href="https://ant.design">{item.title}</a>}
              description={item.subTitle}
            />
            <span>{Dayjs(item.date).format('YYYY-MM-DD HH:mm:ss')}</span>
          </List.Item>
        )}
      />
    </div>
  )
}

